<template>
  <div class="user">
    <!-- 头部 -->
    <van-nav-bar title="我的">
      <template #right>
        <van-icon @click="toPlay" name="expand" color="red" size="25" />
      </template>
    </van-nav-bar>
    <!-- 头部结束 -->
    <div class="content" v-for="data in account" :key="data.id">
      <img
        src="https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/baike/s=220/sign=882debc1a4af2eddd0f14eebbd110102/574e9258d109b3de62a671afc4bf6c81810a4cd8.jpg"
      />
      <div class="text">
        <p class="name">{{ data.nickname }}</p>
        <p class="level">Lv.5</p>
      </div>
    </div>
    <button class="sign-in" @onclick="Toast">签到</button>
    <div class="text-content">
      <van-cell title="我的消息" icon="chat-o" />
      <van-cell title="会员中心" icon="vip-card-o" />
      <van-cell title="商城" icon="cart-o" />
      <van-cell title="听歌免流量" icon="hot-o" />
      <van-cell title="设置" icon="setting-o" />
      <van-cell title="扫一扫" icon="scan" />
      <van-cell title="主题换肤" icon="gift-card-o" />
      <van-cell title="定时关闭" icon="underway-o" />
      <van-cell title="分享" icon="share-o" />
      <van-cell title="关于" icon="warning-o" />
      <van-button type="danger" block @click="toLogin">退出</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: [],
    };
  },
  methods: {
    toPlay() {
      this.$router.push({
        name: "Play",
      });
    },
    Toast() {},
    toLogin() {
      this.$router.push({
        name: "Login",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  text-align: center;
  line-height: 10vw;
}

.content {
  margin: 8vw 0 0 8vw;
  float: left;
}

img {
  width: 16vw;
  border-radius: 50%;
  float: left;
  display: block;
}
.name {
  float: left;
  margin: 3vw 0 0 3vw;
  margin-bottom: 3vw;
}

.level {
  float: left;
  border: 1px solid #666;
  border-radius: 10px;
  font-size: 12px;
  display: block;
  padding: 0 6px;
}

.text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.sign-in {
  display: flex;
  float: right;
  margin-top: 10vw;
  margin-right: 15vw;
  width: 20vw;
  height: 10vw;
  border: none;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: red;
}
.van-button--block {
  margin-top: 7vw;
}
.van-cell {
  font-size: 1.2rem;
}
.text-content {
  margin-top: 30vw;
}

.skip {
  float: right;
}
</style>
